<!DOCTYPE html>
<html>

	<head>
	  <meta charset="utf-8">

	  <title>AIL - framework</title>
		<link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png') }}">

	  <!-- Core CSS -->
		<link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet">
		<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
		<link href="{{ url_for('static', filename='css/dataTables.bootstrap.min.css') }}" rel="stylesheet">

	  <!-- JS -->
		<script src="{{ url_for('static', filename='js/jquery.js')}}"></script>
		<script src="{{ url_for('static', filename='js/helper.js')}}"></script>
		<script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script>
		<script src="{{ url_for('static', filename='js/jquery.dataTables.min.js')}}"></script>
		<script src="{{ url_for('static', filename='js/dataTables.bootstrap.min.js')}}"></script>

	</head>
	<body>

		{% include 'nav_bar.html' %}

		<div class="container-fluid">
			<div class="row">

				{% include 'sidebars/sidebar_objects.html' %}

				<div class="col-12 col-lg-10" id="core_content">

					<div class="card mb-3 mt-1">
						<div class="card-header text-white bg-dark">
							<h5 class="card-title"><img src="{{ url_for('static', filename='image/misp-logo.png')}}" alt="MISP" style="width:100px;"> Import from MISP Export File</h5>
						</div>
							<div class="card-body">

								<form action="{{ url_for('import_export.import_object_file') }}" method="post" enctype=multipart/form-data>

									<div class="form-group">
										<label for="file">Select a <b>JSON File</b> to import:</label>
										<input type="file" class="form-control-file btn btn-outline-secondary" id="file" name="file">
									</div>
									<div class="form-group">
										<button class="btn btn-info" name="submit" type="submit">Import Objects</button>
									</div>

								</form>

								{% if error %}
								<div class="text-center text-danger">
									<b>{{error}}</b>
								</div>
								{% endif %}

						</div>

				</div>

				{% if all_imported_obj %}
					<div class="card mb-3 mt-1">
						<div class="card-header text-white bg-dark">
							<h5 class="card-title">
								<img src="{{ url_for('static', filename='image/ail-icon.png')}}" alt="AIL" style="width:100px;"> Objects Imported <span class="badge badge-primary">{{all_imported_obj|length}}</span></h5>
						</div>
							<div class="card-body">

								<table class="table table-bordered table-hover" id="myTable_">
					      <thead class="thead-dark">
					        <tr>
	  				      	<th>Object UUID</th>
										<th></th>
										<th>Object Type</th>
	  				        <th>Object ID</th>
	                </tr>
					      </thead>
					      <tbody>
									{% for dict_obj in all_imported_obj %}
	                <tr>
	                  <td class="pb-0">{{ dict_obj['uuid'] }}</td>
										<td class="pb-0">
											<div class="my-1">
												<svg height="26" width="26">
													<g class="nodes">
														<circle cx="13" cy="13" r="13" fill="{{ dict_obj['node']['color'] }}"></circle>
														<text x="13" y="13" text-anchor="middle" dominant-baseline="central" class="graph_node_icon {{ dict_obj['node']['style'] }}" font-size="16px">{{ dict_obj['node']['icon'] }}</text>
													</g>
												</svg>
											</div>
										</td>
										<td class="pb-0">{{ dict_obj['type'] }}</td>
	                  <td class="pb-0">
											<a target="_blank" href="{{ dict_obj['url'] }}">
												{{ dict_obj['id'] }}
											</a>
										</td>
	                </tr>
									{% endfor %}
					      </tbody>
					    </table>

							{% include 'correlation/legend_graph_correlation.html' %}

						</div>
					</div>
				{% endif %}

			</div>
		</div>

<script>
$(document).ready(function(){
		$("#page-Decoded").addClass("active");
		$("#nav_misp_import").addClass("active");

		{% if all_imported_obj %}
			$('#myTable_').DataTable({ "lengthMenu": [ 5, 10, 25, 50, 100 ], "pageLength": 10, "order": [[ 2, "asc" ]] });
		{% endif %}
});

function toggle_sidebar(){
	if($('#nav_menu').is(':visible')){
		$('#nav_menu').hide();
		$('#side_menu').removeClass('border-right')
		$('#side_menu').removeClass('col-lg-2')
		$('#core_content').removeClass('col-lg-10')
	}else{
		$('#nav_menu').show();
		$('#side_menu').addClass('border-right')
		$('#side_menu').addClass('col-lg-2')
		$('#core_content').addClass('col-lg-10')
	}
}
</script>


</body>

</html>
